<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis bottom'>
    <text x='50.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-21.9</text>
    <text x='153.571429' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >-8.36</text>
    <text x='257.142857' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >5.19</text>
    <text x='360.714286' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >18.7</text>
    <text x='464.285714' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >32.3</text>
    <text x='567.857143' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >45.8</text>
    <text x='671.428571' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >59.4</text>
    <text x='775.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >72.9</text>
    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />
    <line x1='153.571429' y1='295.000000' x2='153.571429' y2='290.000000' class='tick' />
    <line x1='257.142857' y1='295.000000' x2='257.142857' y2='290.000000' class='tick' />
    <line x1='360.714286' y1='295.000000' x2='360.714286' y2='290.000000' class='tick' />
    <line x1='464.285714' y1='295.000000' x2='464.285714' y2='290.000000' class='tick' />
    <line x1='567.857143' y1='295.000000' x2='567.857143' y2='290.000000' class='tick' />
    <line x1='671.428571' y1='295.000000' x2='671.428571' y2='290.000000' class='tick' />
    <line x1='775.000000' y1='295.000000' x2='775.000000' y2='290.000000' class='tick' />
    <line x1='50.000000' y1='295.000000' x2='775.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='40.000000' y='35.583333' style='text-anchor:end; dominant-baseline:middle;' class='label' >A</text>
    <text x='40.000000' y='82.750000' style='text-anchor:end; dominant-baseline:middle;' class='label' >B</text>
    <text x='40.000000' y='129.916667' style='text-anchor:end; dominant-baseline:middle;' class='label' >C</text>
    <text x='40.000000' y='177.083333' style='text-anchor:end; dominant-baseline:middle;' class='label' >D</text>
    <text x='40.000000' y='224.250000' style='text-anchor:end; dominant-baseline:middle;' class='label' >E</text>
    <text x='40.000000' y='271.416667' style='text-anchor:end; dominant-baseline:middle;' class='label' >F</text>
    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='55.000000' y2='12.000000' class='tick' />
    <line x1='50.000000' y1='59.166667' x2='55.000000' y2='59.166667' class='tick' />
    <line x1='50.000000' y1='106.333333' x2='55.000000' y2='106.333333' class='tick' />
    <line x1='50.000000' y1='153.500000' x2='55.000000' y2='153.500000' class='tick' />
    <line x1='50.000000' y1='200.666667' x2='55.000000' y2='200.666667' class='tick' />
    <line x1='50.000000' y1='247.833333' x2='55.000000' y2='247.833333' class='tick' />
    <line x1='50.000000' y1='12.000000' x2='50.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='bars horizontal'>
    <rect x='477.505274' y='20.725834' width='68.829114' height='13.206666' class='bar color1' fm:series='series1' fm:label='A: 34.000000, 43.000000, A: -14.000000, 54.000000' style=''></rect>
    <rect x='110.416667' y='37.234167' width='520.042194' height='13.206666' class='bar color2' fm:series='series2' fm:label='A: 34.000000, 43.000000, A: -14.000000, 54.000000' style=''></rect>
    <rect x='508.095992' y='67.892500' width='206.487342' height='13.206666' class='bar color1' fm:series='series1' fm:label='B: 38.000000, 65.000000, B: -10.000000, 58.000000' style=''></rect>
    <rect x='141.007384' y='84.400833' width='520.042194' height='13.206666' class='bar color2' fm:series='series2' fm:label='B: 38.000000, 65.000000, B: -10.000000, 58.000000' style=''></rect>
    <rect x='546.334388' y='115.059167' width='22.943038' height='13.206666' class='bar color1' fm:series='series1' fm:label='C: 43.000000, 46.000000, C: 0.000000, 63.000000' style=''></rect>
    <rect x='217.484177' y='131.567500' width='481.803797' height='13.206666' class='bar color2' fm:series='series2' fm:label='C: 43.000000, 46.000000, C: 0.000000, 63.000000' style=''></rect>
    <rect x='469.857595' y='162.225834' width='38.238397' height='13.206666' class='bar color1' fm:series='series1' fm:label='D: 33.000000, 38.000000, D: -4.000000, 53.000000' style=''></rect>
    <rect x='186.893460' y='178.734167' width='435.917722' height='13.206666' class='bar color2' fm:series='series2' fm:label='D: 33.000000, 38.000000, D: -4.000000, 53.000000' style=''></rect>
    <rect x='378.085443' y='209.392500' width='130.010549' height='13.206666' class='bar color1' fm:series='series1' fm:label='E: 21.000000, 38.000000, E: 2.000000, 41.000000' style=''></rect>
    <rect x='232.779536' y='225.900833' width='298.259494' height='13.206666' class='bar color2' fm:series='series2' fm:label='E: 21.000000, 38.000000, E: 2.000000, 41.000000' style=''></rect>
    <rect x='469.857595' y='256.559167' width='168.248945' height='13.206666' class='bar color1' fm:series='series1' fm:label='F: 33.000000, 55.000000, F: -12.000000, 53.000000' style=''></rect>
    <rect x='125.712025' y='273.067500' width='497.099156' height='13.206666' class='bar color2' fm:series='series2' fm:label='F: 33.000000, 55.000000, F: -12.000000, 53.000000' style=''></rect>
  </g>
</svg>
